<template>
  <div>
    <div class="topUser">
      <img :src="lists[0]==undefined?'':require('../../../../../assets/shareflower/shareUserPicture/'+lists[0].share_userPhoto)" alt="" />
        <span>
          {{ lists[0]==undefined?'': lists[0].share_userName }}
        </span>
    </div>
    <!-- 分割线 -->
<el-divider content-position="left">{{lists[0]==undefined?'': lists[0].share_userName}}的分享列表</el-divider>
    <div class="listMain">
    <!-- 分享列表的组件 -->
    <shareList
    class="shareList"
      v-for="item in lists"
      :key="item.message"
      :pic="item.share_picture"
      :title="item.share_title"
      :userpic="item.share_userPhoto"
      :userName="item.share_userName"
      :like="item.share_like"
      :id="item.share_id"
      :showon="item.share_show"
      @getShareByUserId="getShareByUserId(item.share_userId)"
    ></shareList>
    
  </div>
  <p v-if="this.lists==undefined">找不到此类分享，请换一个试试吧!</p>
  </div>
</template>

<script>
import httpApi from '@/http'
import shareList from "../../components/shareList.vue";
export default {
  components: { shareList },
  data() {
    return {
      share_userId: '',
      lists: [],
      page: 1,
      pagesize:12,
    }
  },
  methods: {
    getSearch() {
      var a = location.search
      let b = a.lastIndexOf("=")
      this.share_userId = a.substring(b + 1, a.length)
      console.log(this.share_userId);
    },
    // 通过share_userId查询
    getList() {
      let params = {
        id: this.share_userId,
        page: this.page++,
        pagesize:this.pagesize
      }
      httpApi.ShareApi.getShareListByUserId(params).then((res) => {
        console.log(res);
        this.lists = res.data.data
        console.log(this.lists);
        
      })
    }
  },
  mounted() {
    this.getSearch();
    this.getList()
      
    }
    
  }
</script>

<style lang="scss" scoped>
div{
  user-select: none;
}
.topUser{
  >img{
    width: 4rem;
    height: 4rem;
    border-radius: 100px;
    margin: 0 1rem;
  }
  font-size: 1.5rem;
  color: #333;
  display: flex;
  align-items: center;
}
.listMain {
  display: flex;
  flex: 0;
}
.shareList {
  margin: 10px;
}
.shareList :nth-child(4n) {
  margin-right: 0px;
}
.shareList :nth-child(4n + 1) {
  margin-left: 0px;
}
</style>